<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - 小米10 Pro、Redmi K30 Pro、小米MIX Alpha，小米电视官方网站</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入网页共享部分 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入网页样式表 -->
    <link rel="stylesheet" href="./css/miindex.css">
    <!-- 引入图标样式 -->
    <link rel="stylesheet" href="./font/fonts/font-awesome.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3019949_e50hxp8nm5.css">
    <link rel="shortcut icon" href="./img/xm.png">
</head>

<body>
<header>
    <!-- 顶部导航条 -->
    <div class="top-bar ">
        <ul class="topbar-left ">
            <li><a href="javascript:;">小米商城</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">MIUI</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">IOT</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">云服务</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">金融</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">有品</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">小爱开放平台</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">企业团购</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">资质证照</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">协议规则</a></li>
            <li class="line">|</li>
            <li class="app1">
                <a href="javascript:;">下载app</a>
                <!-- 添加一个下拉层 -->
                <div class="er cleafix">
                    <a class="app" href="javascript:;">
                        <img cleafix src="./img/download.png" alt="二维码">
                        <span>小米商城APP</span>
                    </a>
                </div>
            </li>

            <li class="line">|</li>
            <li><a href="javascript:;">SelectLocation</a></li>

        </ul>
        <ul class="topbar-right ">
            <li><a href="javascript:;">登录</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">注册</a></li>
            <li class="line">|</li>
            <li><a href="javascript:;">消息通知</a></li>


        </ul>
        <div class="shop ">
            <a href="javascript:;">

                <i class="fa fa-shopping-cart"></i>
                <span>
                购物车(0)
            </span>
            </a>
        </div>
    </div>


    <!-- 头部外部容器 -->
    <div class="header-top-bar ">
        <div class="header w ">
            <!-- 顶部logo 是网页中比较重要的地方 -->
            <h1 class="logo" title="小米">
                小米官网
                <a href="/">
                    <img src="./img/捕获.PNG" alt="小米logo">
                </a>
            </h1>
            <!-- 头部导航 -->
            <div class="header_bar">
                <ul class="header_center_bar cleafix">
                    <li>
                        <a class="all_goods" href="#">全部商品分类</a>


                    </li>
                    <li class="show-goods"><a href="#">小米手机</a></li>
                    <li class="show-goods"><a href="#">redmi小米</a></li>
                    <li class="show-goods"><a href="#">电视</a></li>
                    <li class="show-goods"><a href="#">笔记本</a></li>
                    <li class="show-goods"><a href="#">家电</a></li>
                    <li class="show-goods"><a href="#">路由器</a></li>
                    <li class="show-goods"><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                    <!-- 在ul里直接创建一个弹出层 -->
                    <!-- 头部下拉层 -->
                    <div class="goods-info">
                        <img src="./img/phone1.png">
                        <img src="./img/phone2.png">
                        <img src="./img/phone3.png">
                        <img src="./img/phone4.png">
                        <img src="./img/phone5.png">
                        <img src="./img/phone6.png">
                    </div>
                </ul>

            </div>

        </div>
    </div>


    <!-- 创建搜索栏 -->
    <div>
        <form class="search-wrapper" action="#">
            <input class="search-inp" type="text">
            <button class="search-but">
                <i class=" searchi fa fa-search "></i>
            </button>

        </form>

    </div>

</header>
<main>

    <!-- 设置左侧菜单栏 -->
    <div class="mune">
        <ul class="left-mune">
            <li><a href="#">
                电话 手机卡
                <i class="fa fa-arrow-right"></i>
            </a></li>
            <li><a href="#">
                电视 盒子
                <i class="fa fa-arrow-right"></i>
            </a></li>
            <li><a href="#">
                笔记本 显示器
                <i class="fa fa-arrow-right"></i>
            </a></li>
            <li>
                <a href="#">
                    家电 插线板
                    <i class="fa fa-arrow-right"></i>
                </a></li>
            <li><a href="#">
                出行 穿戴
                <i class="fa fa-arrow-right"></i>
            </a></li>
            <li><a href="#">
                智能 路由器
                <i class="fa fa-arrow-right"></i>
            </a></li>
            <li><a href="#">
                电源 配件
                <i class="fa fa-arrow-right"></i>
            </a></li>
            <li>
                <a href="#">
                    健康 儿童
                    <i class="fa fa-arrow-right"></i>
                </a></li>
            <li><a href="#">
                耳机 音箱
                <i class="fa fa-arrow-right"></i>
            </a></li>
            <li><a href="#">
                生活 箱包
                <i class="fa fa-arrow-right"></i>
            </a></li>


        </ul>
    </div>
    <div class="banner-warrper">
        <div class="banner">
            <a href="#">
                <img src="./img/676ddccc418842904f82ccdc66bbaa34.jpg" alt="小米">
            </a>
        </div>
    </div>
</main>
<footer>

</footer>


</body>

</html>